<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>echarts</title>
		<script src="https://cdn.bootcss.com/echarts/4.5.0/echarts.min.js"></script>
	</head>
	<body>
		<div id="chart" style="width:400px;height:400px;"></div>
	</body>
	<script type="text/javascript">
		// 初始化图表标签
		var myChart = echarts.init(document.getElementById('chart'));
		var options = {
			//定义一个标题
			title: {
				text: 'AI'
			},
			legend: {
				data: ['AI']
			},
			axisPointer: {
				show: true,
				type: 'line'
			},
			//X轴设置
			xAxis: {
				data: ['ML', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL',
					'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL',
					'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL',
					'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL',
					'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL',
					'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL',
					'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL',
					'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL',
					'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL',
					'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL',
					'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL', 'DL-GAN', 'DL', 'TL', 'RL',
					'DL-GAN'
				]
			},
			yAxis: {},
			//name=legend.data的时候才能显示图例
			series: [{
				name: '量',
				type: 'bar',
				data: ['12', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60', '32', '45', '78', '60']
			}]
		};

		myChart.setOption(options);
	</script>
</html>
